<template>
    <div>
        <div><el-button size="mini" type="primary" @click="dialogVisible = true">功能授权</el-button></div>
        <el-dialog
            title="功能授权"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose">
            <div style="margin-bottom: 10px">
                <el-checkbox v-model="checked1" style="margin-right: 20px">仓管员</el-checkbox>
                <el-checkbox v-model="checked2">账号管理员</el-checkbox>
            </div>
            <div style="display: flex;flex-direction: row">
                <div class="cl">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"  style="width:100%;background: #dedede">一级菜单</el-checkbox>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                        <el-checkbox v-for="city in cities" :label="city" :key="city" style="border: 1px solid #dedede;border-left: 0px;border-right: 0px">{{city}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="cl">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="width:100%;background: #dedede">二级菜单</el-checkbox>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                        <el-checkbox v-for="city in cities" :label="city" :key="city" style="border: 1px solid #dedede;border-left: 0px;border-right: 0px">{{city}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="cl">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="width:100%;background: #dedede">三级菜单</el-checkbox>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                        <el-checkbox v-for="city in cities" :label="city" :key="city" style="border: 1px solid #dedede;border-left: 0px;border-right: 0px">{{city}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="cl">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="width:100%;background: #dedede">功能名称</el-checkbox>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"  style="display: flex;flex-direction: column">
                        <el-checkbox v-for="city in cities" :label="city" :key="city" style="border: 1px solid #dedede;border-left: 0px;border-right: 0px">{{city}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    const cityOptions = ['组织管理', '商品管理', '基础数据', '进销存管理','组织管理2', '商品管理3', '基础数据4', '进销存管理5'];
    export default {
        data() {
            return{
                textarea3: '',
                checked1:'',
                checked2:'',
                dialogVisible: false,
                checkAll: false,
                checkedCities: ['上海', '北京'],
                cities: cityOptions,
                isIndeterminate: false
            }
        },
        methods:{
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-checkbox+.el-checkbox{
        margin-left: 0px;
    }
    .cl{
        border: 1px solid #dedede;flex: 1;text-align: center;line-height: 36px;margin-right: 4px;
    }
    .cl:last-child{margin-right: 0px}
</style>
